<template>
    <div id="app">
        <div style="margin-bottom:10px;">
            <t-button @click="visibleBody = true">添加标签</t-button>
            <t-button variant="outline" theme="danger" ghost @click="paixu = 1">正序</t-button>
            <t-button variant="outline" theme="warning" @click="paixu = 2" ghost>倒序</t-button>
        </div>
        <t-loading :loading="loading" size="medium" show-overlay>
            <t-base-table stripe bordered row-key="id" :data="filterFoodlabel" :columns="columns" :max-height="'70vh'"
                :pagination="{ total: filterFoodlabel.length }">
                <template #type="{ col, row }">
                    <t-tag v-if="row.type == '冷热'" theme="primary" variant="light">{{ row.type }}</t-tag>
                    <t-tag v-else theme="success" variant="light">{{ row.type }}</t-tag>
                </template>
                <!-- <template #status="{ col, row }"> -->
                <!-- <t-switch @click="statusChange(row._id, row.status)" :customValue="[1, 0]" v-model="row.status"
                    size="large" :label="['上架中', '下架中']"></t-switch> -->
                <!-- </template> -->
                <template #btns="{ col, row }">
                    <t-popconfirm @confirm="deleteShop(row.id)" content="确认删除吗">
                        <t-button theme="warning">删除</t-button>
                    </t-popconfirm>
                </template>
            </t-base-table>
        </t-loading>
        <!-- 新增数据输入框 -->
        <t-dialog :footer="false" v-model:visible="visibleBody" attach="body" header="添加标签"
            :on-confirm="() => (visibleBody = false)">

            <template #body>
                <t-form ref="formValidatorStatus" :data="label" :rules="rules" @submit="onSubmit" @reset="onReset"
                    @validate="onValidate">
                    <t-form-item label="分类" name="type">
                        <t-select @Change="changeLabelType">
                            <t-option key="apple" label="冷热" value="冷热" />
                            <t-option key="orange" label="糖度" value="糖度" />
                        </t-select>
                    </t-form-item>
                    <t-form-item label="标签名" name="name">
                        <t-input v-model.number="label.name" placeholder="请输入标签名"></t-input>
                    </t-form-item>
                    <t-form-item :status-icon="false">
                        <t-space size="small">
                            <t-button theme="primary" type="submit">提交</t-button>
                        </t-space>
                    </t-form-item>
                </t-form>
                <!-- <t-form ref="formValidatorStatus" :data="addCoupon" :rules="rules" @submit="onSubmit" @reset="onReset"
                    @validate="onValidate">
                    <t-form-item label="优惠券名称" name="name">
                        <t-input v-model="addCoupon.name" placeholder="请输入优惠券名称"></t-input>
                    </t-form-item>
                    <t-form-item label="折扣金额" name="discountmoney">
                        <t-input v-model.number="addCoupon.discountmoney" placeholder="请输入折扣金额"></t-input>
                    </t-form-item>
                    <t-form-item label="积分消耗" name="price">
                        <t-input v-model.number="addCoupon.price" placeholder="请输入积分消耗"></t-input>
                    </t-form-item>
                    <t-form-item :status-icon="false">
                        <t-space size="small">
                            <t-button theme="primary" type="submit">提交</t-button>
                            <t-button theme="default" variant="base" type="reset">重置</t-button>
                        </t-space>
                    </t-form-item>
                </t-form> -->
            </template>
        </t-dialog>
    </div>
</template>

<script setup>
import { getFoodlabelData } from '@/http/modules/store'
import { addFoodLabel } from '@/http/modules/user'
import { ref } from '@vue/reactivity'
import { computed } from '@vue/runtime-core';
const foodlabel = ref([]);
const visibleBody = ref(false);
const loading = ref(true)
const label = ref({
    name: "",
    type: ""
})

const paixu = ref(0);

const filterFoodlabel = computed(() => {
    let fk_food = foodlabel.value;
    switch (paixu.value) {
        case 1:
            fk_food = fk_food.sort((a, b) => {
                return a.id - b.id
            })
            break;
        case 2:
            fk_food = fk_food.sort((a, b) => {
                return b.id - a.id
            })
            break;
        default:
            fk_food = fk_food.sort((a, b) => {
                return b.id - a.id
            })
    }
    return fk_food
})

// 表单规则
const rules = {
    name: [
        { required: true, message: '标签名称必填', type: 'error' },
    ],
    type: [
        { required: true, message: '分类必选', type: 'error' },
    ],
};

const onSubmit = async ({ validateResult, firstError, e }) => {
    e.preventDefault();
    if (validateResult === true) {
        // console.log(toRaw(changeCounpon.value));
        const res = await addFoodLabel({
            text: label.value.name,
            type: label.value.type
        });
        if (res.code == 200) {
            loadData()
            visibleBody.value = false
        }
    } else {
        console.log('Validate Errors: ', firstError, validateResult);
        MessagePlugin.warning(firstError);
    }
}

const changeLabelType = (a) => {
    label.value.type = a
}
const columns = [
    {
        width: '100',
        colKey: 'id',
        title: '序号',
        // 对齐方式
        align: 'center',
        // 设置列类名
        className: 'custom-column-class-name',
        // 设置列属性
        attrs: {
            'data-id': 'first-column',
        },
    },
    {
        colKey: 'text',
        title: '标签名',
    },
    {
        colKey: 'type',
        title: '分组',
        cell: "type"
    },
    // {
    //     colKey: 'type',
    //     title: '状态',
    //     cell: "status"
    // },
    {
        colKey: "fenlei",
        title: "操作",
        cell: 'btns'
    }
];
const loadData = () => {
    getFoodlabelData().then(res => {
        foodlabel.value = res;
        loading.value = false
    })
}
loadData()
</script>
 
<style lang="less" scoped>

</style>